<template>
  <div class="block text-center">
    <span class="demonstration">轮播图</span>
    <el-carousel type="card" height="400px">
      <!-- <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item> -->
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_1.jpg" alt="bg1">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_2.jpg" alt="bg2">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_3.jpg" alt="bg3">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_4.jpg" alt="bg4">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_5.jpg" alt="bg5">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_6.jpg" alt="bg6">
      </el-carousel-item>
      <el-carousel-item>
        <img class="auto-fit-img" src="@/assets/bg_7.jpg" alt="bg7">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
/* 图片保持原有尺寸比例，内容被缩放, 图片适应容器大小 */
.auto-fit-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.demonstration {
  color: var(--el-text-color-secondary);
}


/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>

<script>
export default {
  name: 'ImageSlider',
  props: {
    image_assets: String
  }
}
</script>